<template>
    <div>
        <el-card :body-style="{ padding: '0px' }">
            <div class="userlist_top">
                <div class="userlist_topone">
                     <div>
                         <span class="textPadding">注册手机号</span>
                         <el-input v-model="searchInfo.regphone" placeholder="请输入注册手机号"></el-input>
                     </div>
                     <div>
                         <span class="textPadding">姓名</span>
                         <el-input v-model="searchInfo.username" placeholder="请输入姓名"></el-input>
                     </div>
                     <div>
                         <span class="textbigPadding">代理级别</span>
                         <el-select v-model="dailivalue" placeholder="请选择代理级别">
                             <el-option value="全部">全部</el-option>
                            <el-option v-for="(v,i) in agentGrade" :key="i" :value="v.grade">{{v.grade}}</el-option>
                        </el-select>
                     </div>
                </div> <br>
                <div class="userlist_topone">
                     <div>
                         <span class="textPadding">注册时间</span>
                         <el-date-picker
                            v-model="searchInfo.regStart"
                            type="date"
                            format="yyyy年MM月dd日"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择开始时间">
                        </el-date-picker>
                     </div>
                     <div>
                         <span class="textPadding">至</span>
                         <el-date-picker
                            v-model="searchInfo.regEnd"
                            type="date"
                            format="yyyy年MM月dd日"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择结束时间">
                        </el-date-picker>
                     </div>
                     <div>
                         <span class="textPadding">最后一次登录时间</span>
                         <el-date-picker
                            v-model="searchInfo.lastLoginDate"
                            type="date"
                            format="yyyy年MM月dd日"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择时间">
                        </el-date-picker>
                     </div>
                     <el-button type="primary" class="chaxunBtn" @click="toSearch">查询</el-button>
                </div>
            </div>
            <div class="userlist_bottom">
                <div class="userlist_bottom_title">会员列表</div>
                <div class="userlist_bottom_tablede">
                    <!-- <span></span>
                    <span>注册时间：{{regDate.start}} 至 {{regDate.end}}</span>
                    <span>表号：P001-MK001-BK001</span> -->
                </div>
                <el-table
                    :data="tableData"
                    border
                    :summary-method="getSummaries"
                    show-summary
                    class="userTable"
                    style="width: 98%">
                    <el-table-column
                        type="selection"
                        width="60">
                    </el-table-column>
                    <el-table-column
                        type="index"
                        label="序号"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="userId"
                        width="80"
                        label="会员ID">
                    </el-table-column>
                    <el-table-column
                        prop="regPhone"
                        sortable
                        width="120"
                        label="注册手机号">
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        sortable
                        label="用户名">
                    </el-table-column>
                    <el-table-column
                        prop="isTixian"
                        sortable
                        width="100"
                        label="已提现">
                    </el-table-column>
                    <el-table-column
                        prop="noTixian"
                        sortable
                        width="100"
                        label="未提现">
                    </el-table-column>
                    <el-table-column
                        prop="daili"
                        sortable
                        width="110"
                        label="代理级别">
                    </el-table-column>
                    <el-table-column
                        prop="regShijian"
                        sortable
                        width="170"
                        label="注册时间">
                    </el-table-column>
                    <el-table-column
                        prop="lastShijian"
                        sortable
                        width="170"
                        label="最后一次登录时间">
                    </el-table-column>
                    <el-table-column
                        prop="lastIp"
                        width="140"
                        label="最后登录ip">
                    </el-table-column>
                    <el-table-column label="操作" min-width="270">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            type="primary" plain
                            @click="toUserdetails(scope.$index)"
                            >查看</el-button>
                            <el-button
                            size="mini"
                            type="warning" plain
                            @click="openIPdialog(scope.$index)"
                            >封禁IP</el-button>
                            <el-button
                            size="mini"
                            type="info" plain
                            @click="openblackdialog(scope.$index)"
                            >加入黑名单</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @current-change="handleCurrentChange"
                    style="float:right"
                    background
                    :current-page="searchInfo.pagenum"
                    :page-size="searchInfo.pagesize"
                    layout="prev, pager, next, total"
                    :total="total">
                </el-pagination>
            </div>
            
        </el-card>
        <!-- 封禁IP对话框 -->
        <el-dialog
            :visible.sync="IPdialogVisible"
            width="30%"
            title="最后登录ip"
            top="35vh"
        >   
            <div style="display:flex">
                <span>IP</span>
                <p style="margin-left:90px;color:#000">{{fengjinIp}}</p>
            </div> <br>
            <el-button type="success" class="fengjinBtn" @click="toFengjin">封禁</el-button>
            
        </el-dialog>
        <!-- 加入黑名单对话框 -->
        <el-dialog
            :visible.sync="blackdialogVisible"
            width="30%"
            title="加入黑名单"
            top="35vh"
        >   
            <div style="display:flex">
                <span>加入原因</span>
                <el-select style="width:360px;margin-left:48px" v-model="blackReason" placeholder="请选择加入原因">
                    <el-option value="欠费金额大且逾期时间长">欠费金额大且逾期时间长</el-option>
                    <el-option value="欠费金额大">欠费金额大</el-option>
                    <el-option value="逾期时间长">逾期时间长</el-option>
                    <el-option value="恶意刷单">恶意刷单</el-option>
                </el-select>
            </div> <br>
            <div style="display:flex">
                <span>备注</span>
                <el-input
                    type="textarea"
                    :rows="4"
                    style="margin-left:76px;width:360px"
                    placeholder="请输入备注"
                    v-model="beizhu">
                </el-input>
            </div> <br>
            <el-button type="success" class="fengjinBtn" @click="toaddblack">确定</el-button>
            <el-button type="success" plain @click="blackdialogVisible = false" >取消</el-button>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchInfo:{
                regphone:'',
                username:'',
                dailivalue:'',
                regStart:'',
                regEnd:'',
                lastLoginDate:'',
				pagenum:1,
				pagesize:10
            },
            total:0,
            regDate:{},
            tableData: [],
            IPdialogVisible:false,
            blackdialogVisible:false,
            blackReason:'',
            beizhu:'',
            userId:'',
            fengjinIp:'',
            agentGrade:[],
            dailivalue:'全部'
        }
    },
    watch:{
      dailivalue(val) {
            if( val == '全部' ){
                this.searchInfo.dailivalue = ''
            }
            for(var i=0;i<this.agentGrade.length;i++){
                if(val == this.agentGrade[i].grade){
                    this.searchInfo.dailivalue = this.agentGrade[i].id;
                }
            }
      }
    },
    methods:{
        toUserdetails(x){
            var userId = this.tableData[x].userId
            this.$router.push({name:'Userdetails',query:{userId}}  )
        },
        openIPdialog(x){
            this.IPdialogVisible = true
            this.fengjinIp = this.tableData[x].lastIp;
        },
        toFengjin(){
            this.$http.post('banIp',{ip:this.fengjinIp}).then((data)=>{
                if(data.data.success){
                    var num = data.data.msg.length;
                    if ( num>1 ) this.$message({
                    	showClose: true,
                    	message: data.data.msg,
                    	type: 'success',
                    	offset:'65',
                    	duration:1000
                    });
                }else{
                    this.$message.error(data.data.msg)
                }
                this.IPdialogVisible = false
            })
        },
        openblackdialog(x){
            this.blackdialogVisible = true
            this.userId = this.tableData[x].userId
        },
        toaddblack(){
            this.$http.post('addBlacklist',{id:this.userId,blackReason:this.blackReason,beizhu:this.beizhu}).then((data)=>{
                if(data.data.success){
                    var num = data.data.msg.length;
                    if ( num>1 ) this.$message({
                    	showClose: true,
                    	message: data.data.msg,
                    	type: 'success',
                    	offset:'65',
                    	duration:1000
                    });
                    this.getList()
                }else{
                    this.$message.error(data.data.msg)
                }
                this.blackdialogVisible = false
                this.blackReason = ''
                this.beizhu = ''
            })
        },
        getSummaries(param){
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index)=>{
                if(index === 0){
                    sums[index] = '合计';
                }else if(index === 1){
                    sums[index] = this.tableData.length;
                }else if(index === 2){
                    sums[index] = this.tableData.length;
                }else{
                    sums[index] = '*';
                }
            })
            return sums;
        },
        toSearch(){
            this.getList()
        },
        getList(){
            this.$http.post('getUserList',this.searchInfo).then((data)=>{
                if(data.data.success){
                    var num = data.data.msg.length;
                    if ( num>1 ) this.$message({
                    	showClose: true,
                    	message: data.data.msg,
                    	type: 'success',
                    	offset:'65',
                    	duration:1000
                    });
                    this.tableData = data.data.data.tableData;
                    this.regDate = data.data.data.regDate;
                    this.total = data.data.data.total;
                    this.agentGrade = data.data.data.agentGrade;
                }else{
                    this.$message.error(data.data.msg)
                }
            })
        },
        handleCurrentChange(newPage){
            this.searchInfo.pagenum = newPage;
            this.getList()
        }
    },
    created(){
        this.getList()
    }
}
</script>

<style scoped>
    .el-card{
        margin: 8px;
    }
    .userlist_top{
        height: 100px;
        border-bottom: 1px solid #e8e8e8;
        padding:20px 10px;
    }
    .userlist_topone{
        display: flex;
    }
    .el-input{
        width: 180px;
    }
    .el-date-editor.el-input{
        width: 180px;
    }
    .textPadding{
        font-size: 14px;
        margin: 0 14px;
    }
    .textbigPadding{
        margin: 0 14px 0 200px;
        font-size: 14px;
    }
    .chaxunBtn{
        width: 117px;
        margin-left: 20px;
    }
    .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #2AD198;
    }
    .fengjinBtn{
        background-color: #2AD198;
        color: #fff;
        width: 117px;
        margin-left: 100px;
    }
    .userlist_bottom{
        height: 670px;
    }
    .userlist_bottom_title{
        text-align: center;
        font-weight: 600;
        padding: 20px 0 10px;
    }
    .userlist_bottom_tablede{
        display: flex;
        justify-content: space-between;
        
    }
    .userlist_bottom_tablede>span{
        font-size: 14px;flex: 1;
        color: #263238;
        display: block;
        text-align: center;
    }
    .userTable{
        margin: 10px;
    }
</style>